<template>
  <div class="h-full overflow-y-auto">
    <div class="card">
      <PageHeader class="p10 border-bottom">
        <div class="flex_aic">
          <div class="fs-14 font-600">{{ $t("goods_sale.交易总览") }}</div>
        </div>
      </PageHeader>
      <div class="flex gap-20 w-full p20">
        <div
          class="flex1 color-white base-card"
          v-for="(item, index) in baseData"
          :key="item.name"
        >
          <div class="flex_aic_jcsb">
            <div>{{ $t(item.name) }}</div>
            <el-dropdown
              @command="(val) => handleDateTypeCommand(val, item, index)"
              v-if="item.dateType"
            >
              <div class="color-white">
                {{ getDateTypeLabel(item.dateType) }}
                <el-icon><CaretBottom /></el-icon>
              </div>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item
                    v-for="item in dateTypeOptions"
                    :key="item.value"
                    :command="item.value"
                    >{{ item.label }}</el-dropdown-item
                  >
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
          <div class="fs-30 font-bold mt36 splitLIne pb8">
            {{ item.value }}
          </div>
        </div>
      </div>
    </div>

    <div class="card mt10">
      <PageHeader class="p10 border-bottom">
        <div class="flex_aic">
          <div class="fs-14 font-600">{{ $t("goods_sale.商品动销趋势") }}</div>
        </div>
        <template #right>
          <DatePick v-model="dateRange1" @change="getSkuSaleTrend" />
        </template>
      </PageHeader>
      <div class="mt20 ml20 flex_aic">
        <div class="mr12">{{ $t("goods_sale.筛选项") }}</div>
        <el-radio-group v-model="dataType" size="small" @change="initChart1">
          <el-radio
            v-for="item in typeOptions"
            :key="item.value"
            :label="item.value"
          >
            {{ $t(item.label) }}
          </el-radio>
        </el-radio-group>
      </div>
      <div style="width: 100%; height: 458px" id="chart1"></div>
    </div>

    <div class="flex mt10 gap-10">
      <!-- <div class="card2">
        <PageHeader class="border-bottom p10">
          <div class="flex_aic">
            <div class="fs-14 font-600">
              {{ $t("goods_sale.商品销售变化趋势") }} - TOP10
            </div>
            <el-radio-group class="ml10" v-model="dataType2" size="small">
              <el-radio-button :label="$t('goods_sale.销售额')" value="1" />
              <el-radio-button :label="$t('goods_sale.销量')" value="2" />
            </el-radio-group>
          </div>
          <template #right>
            <DatePick class="ml20" v-model="dateRange2" />
          </template>
        </PageHeader>
        <div id="chart2" style="width: 100%; height: 458px"></div>
      </div> -->
      <div class="card w-full">
        <PageHeader
          class="border-bottom p10"
          :title="$t('goods_sale.商品销售排行') + ' - TOP10'"
        >
          <template #right>
            <DatePick class="ml20" v-model="dateRange3" @change="changeDateRange3"/>
          </template>
        </PageHeader>
        <div class="p10">
          <el-table
            :data="skuSaleTop10Data"
            style="width: 100%"
            class="cover-table"
            border
          >
            <el-table-column
              type="index"
              :label="$t('goods_sale.序号')"
              width="80"
            />
            <el-table-column
              :prop="'skuName' + locale"
              :label="$t('goods_sale.商品名称')"
            />
            <el-table-column
              prop="saleAmount"
              :label="$t('goods_sale.销售额')"
              sortable
            />
            <el-table-column
              prop="saleCount"
              :label="$t('goods_sale.销量')"
              sortable
            />
          </el-table>
        </div>
      </div>
    </div>

    <!-- <div class="card mt10">
      <PageHeader class="p10 border-bottom">
        <div class="flex_aic">
          <div class="fs-14 font-600">{{ $t("goods_sale.商品报表") }}</div>
        </div>
        <template #right>
          <el-button type="primary" size="small">
            <SvgIcon name="iconziyuan23" color="#fff" />
            <span class="ml4">{{ $t("goods_sale.导出报表") }}</span>
          </el-button>
        </template>
      </PageHeader>

      <div class="p10">
        <el-tabs v-model="tabName" type="card" size="small">
          <el-tab-pane :label="$t('goods_sale.按天')" name="1">
            <Table1 />
          </el-tab-pane>
          <el-tab-pane :label="$t('goods_sale.按商品')" name="2">
            <Table2 />
          </el-tab-pane>
        </el-tabs>
      </div>
    </div> -->
  </div>
</template>
<script setup>
import { ref, onMounted, watchPostEffect, watch } from "vue";
import { CaretBottom } from "@element-plus/icons-vue";
import moment from "moment";
import * as echarts from "echarts";
import DatePick from "@/components/datePick.vue";
import initChart from "@/utils/chart";
import Table1 from "./components/table1.vue";
import Table2 from "./components/table2.vue";
import Api from "@/config/api/api";

import { useI18n } from "vue-i18n";
const { t, locale } = useI18n();
const tabName = ref("1");
const dateRange1 = ref([
  moment().subtract(1, "days").format("YYYY-MM-DD 00:00:00"),
  moment().subtract(1, "days").format("YYYY-MM-DD 23:59:59"),
]);

const dateRange2 = ref([
  moment().subtract(1, "days").format("YYYY-MM-DD 00:00:00"),
  moment().subtract(1, "days").format("YYYY-MM-DD 23:59:59"),
]);
const dateRange3 = ref([
  moment().subtract(1, "days").format("YYYY-MM-DD 00:00:00"),
  moment().subtract(1, "days").format("YYYY-MM-DD 23:59:59"),
]);
const dataType2 = ref("1");
const baseData = ref([
  {
    name: "goods_sale.商品SPU总数",
    value: 0,
    key: "skuCount",
    dateType: "1",
  },
  {
    name: "goods_sale.动销商品数",
    value: 0,
    key: "skuHasSaleCount",
    dateType: "1",
  },
  {
    name: "goods_sale.新增商品数",
    value: 0,
    key: "skuCreateCount",
    dateType: "1",
  },
  {
    name: "goods_sale.支付金额",
    value: 0,
    key: "saleAmount",
    dateType: "1",
  },
  {
    name: "goods_sale.下单数",
    value: 100,
    key: "saleCreateCount",
    dateType: "1",
  },
]);
const chart1Data = ref([]);
const skuSaleTop10Data = ref([]);
const tableData = ref(
  Array.from({ length: 10 }, (_, index) => ({
    goodsName: `${t("goods_sale.商品名称")}${index + 1}`,
    sales: Math.floor(Math.random() * 1000),
    orderCount: Math.floor(Math.random() * 100),
  }))
);

const dateTypeOptions = ref([
  {
    label: t("goods_sale.昨日"),
    value: "1",
  },
  {
    label: t("goods_sale.近7天"),
    value: "2",
  },
  {
    label: t("goods_sale.近30天"),
    value: "3",
  },
]);

const dataType = ref("1");
const dateType3 = ref("1");
const typeOptions = ref([
  {
    label: t("goods_sale.新增商品数"),
    value: "1",
    key: "skuCreateCount",
  },
  {
    label: t("goods_sale.动销商品数"),
    value: "2",
    key: "skuHasSaleCount",
  },
  {
    label: t("goods_sale.下单数"),
    value: "3",
    key: "saleCreateCount",
  },
  {
    label: t("goods_sale.支付订单数"),
    value: "4",
    key: "saleCount",
  },
  {
    label: t("goods_sale.支付金额"),
    value: "5",
    key: "saleAmount",
  },
  {
    label: t("goods_sale.下单金额"),
    value: "6",
    key: "saleCreateAmount",
  },
]);
const pageInfo2 = ref({
  currentPage: 1,
  pageSize: 10,
  total: 100,
});

function handleDateTypeCommand(command, item, index) {
  item.dateType = command;
  getSkuSummary(index, item.key, item.dateType);
}

const getDateTypeLabel = (value) => {
  return dateTypeOptions.value.find((item) => item.value === value)?.label;
};
// 近三十天日期
const thirtyDays = Array.from({ length: 30 }, (_, i) =>
  moment()
    .add(i - 29, "day")
    .format("YYYY-MM-DD")
);

//24小时
const twentyFourHours = Array.from({ length: 24 }, (_, i) =>
  moment("00:00", "HH:mm").add(i, "hour").format("HH:mm")
);
const chart1 = null,
  chart2 = null;

const getSkuSummary = (index, key, dateType) => {
  let startDate = "",
    endDate = "";
  if (dateType == "1") {
    startDate = moment().subtract(1, "days").format("YYYY-MM-DD 00:00:00");
    endDate = moment().subtract(1, "days").format("YYYY-MM-DD 23:59:59");
  } else if (dateType == "2") {
    startDate = moment().subtract(6, "days").format("YYYY-MM-DD 00:00:00");
    endDate = moment().format("YYYY-MM-DD 23:59:59");
  } else if (dateType == "3") {
    startDate = moment().subtract(29, "days").format("YYYY-MM-DD 00:00:00");
    endDate = moment().format("YYYY-MM-DD 23:59:59");
  }
  Api.skuSummary({
    startDate,
    endDate,
  }).then((res) => {
    if (res.status == 200) {
      baseData.value[index].value = res.data[key];
    }
  });
};

const getSkuSaleTrend = (value, type) => {
  Api.skuSaleTrend({
    startDate: value[0],
    endDate: value[1],
    type: type,
  }).then((res) => {
    chart1Data.value = res.data;
  });
};
const initChart1 = () => {
  const item = typeOptions.value.find((item) => item.value == dataType.value);
  initChart("chart1", chart1, [
    {
      name: item.label,
      data: chart1Data.value?.map((v) => [v.time, v[item.key]]) || [],
      rgb: "33,195,188",
    },
  ]);
};
const initChart2 = () => {
  return
  const colors = [
    "33,195,188",
    "30,135,240",
    "55,162,218",
    "50,197,233",
    "159,230,184",
    "255,219,92",
    "255,159,217",
    "251,114,147",
    "255,102,0",
    "106,123,151",
  ]
  const data = skuSaleTop10Data.value.map((item, index) => {
    return {
      name: item['skuName' + locale.value],
      data: item.sales,
      rgb: colors[index],
    };
  });
  // initChart(
  //   "chart2",
  //   chart2,
  //   [
  //     {
  //       name: "销售额",
  //       data: [120, 132, 101, 134, 90, 230, 210],
  //       rgb: "33,195,188",
  //     },
  //   ],
  // );
};
const getSkuSaleTop10 = () => {
  Api.skuSaleTop10({
    startDate: dateRange3.value[0],
    endDate: dateRange3.value[1],
    type: dateType3.value,
  }).then((res) => {
    skuSaleTop10Data.value = res.data || [];
  });
};
const changeDateRange3 = (value, type) => {
  dateRange3.value = value;
  dateType3.value = type;
  getSkuSaleTop10();
};
onMounted(async () => {
  getSkuSaleTrend(dateRange1.value, 1);
  getSkuSaleTop10();
  baseData.value.forEach((item, index) => {
    if (item.dateType) {
      getSkuSummary(index, item.key, item.dateType);
    }
  });
});

watch(
  () => chart1Data.value,
  () => {
    initChart1();
  },
  {
    deep: true,
  }
);

</script>
<style lang="scss" scoped>
.border-bottom {
  border-bottom: 1px solid #e5e5e5;
}
.card {
  background-color: #fff;
  border-radius: 2px;

  .titleBox {
    width: 100px;
    background-color: #fff7f4;
  }
}
.card2 {
  background-color: #fff;
  border-radius: 2px;
  width: calc((100% - 10px) / 2);
  .chart_box {
    height: 458px;
    margin-top: 30px;
  }
}

.base-card {
  height: 163px;
  padding: 12px 30px 12px 2.4%;
  background-repeat: no-repeat;
  background-position: top;
  background-size: 100% 100%;

  &:nth-child(1) {
    background-image: url("@/assets/images/statistics/bg1.png");
  }
  &:nth-child(2) {
    background-image: url("@/assets/images/statistics/bg2.png");
  }
  &:nth-child(3) {
    background-image: url("@/assets/images/statistics/bg3.png");
  }
  &:nth-child(4) {
    background-image: url("@/assets/images/statistics/bg4.png");
  }
  &:nth-child(5) {
    background-image: url("@/assets/images/statistics/bg5.png");
  }
}

.splitLIne {
  width: 130px;
  border-bottom: 1px solid #ffffff;
}
</style>
